<template>
  <div class="RegularlyPerform">
    <el-dialog
      custom-class="el-dialog-redefine"
      v-bind="$attrs"
      title="定期任务配置"
      :visible.sync="dialogVisible"
      :show-close="showClose"
      @open="dialogOpen"
    >
      <div class="outside-border">
        <div class="config-area">
          <div class="config-operation">
            <el-button class="but-add" type="text" size="medium" @click="handleAdd">
              <i class="add-icon"></i>添加
            </el-button>
            <el-button
              class="but-save"
              type="text"
              size="medium"
              :loading="saveLoading"
              @click="handleSave"
            >
              <i class="save-icon"></i>保存
            </el-button>
          </div>
          <div class="config-list">
            <el-table
              :data="regularlyData"
              border
              size="mini"
              class="el-table-redefine"
              style="width: 100%"
              height="100%"
            >
              <el-table-column type="index" label="序号" align="center" width="50"></el-table-column>
              <el-table-column prop="executeTime" label="开始时间">
                <template slot-scope="scope">
                  <el-date-picker
                    type="datetime"
                    size="mini"
                    value-format="yyyy-MM-dd HH:mm:ss"
                    format="yyyy-MM-dd HH:mm:ss"
                    v-model="scope.row.executeTime"
                    @change="handleTimeChange"
                  ></el-date-picker>
                </template>
              </el-table-column>
              <el-table-column align="center" label="操作">
                <template slot-scope="scope">
                  <el-button type="text" size="mini" @click="deleteRow(scope, scope.$index)">删除</el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { parseTime } from "@/utils";

import {
  taskRegularsList,
  taskRegularsUpdate,
  taskRegularsDelete,
  robotParams,
  postOperationLogs
} from "@/api/apiManagement";

export default {
  name: "RegularlyPerform",
  props: {
    showClose: {
      type: Boolean,
      default: true
    },
    data: {
      type: [Array, Object],
      required: true
    }
  },
  data() {
    return {
      dialogVisible: false,
      robot_id: "",
      regularsQueryForm: {
        page: 1,
        size: 0,
        taskId: null
      },
      saveLoading: false,
      regularsForm: {
        taskId: null,
        robotId: null,
        name: "",
        taskRegularRequests: []
      },
      regularlyData: [],
      rosObj: {
        ip: "",
        port: ""
      }
    };
  },
  computed: {},
  created() {},
  mounted() {},
  methods: {
    isShowDia(isVisible) {
      let self = this;
      self.dialogVisible = isVisible;
    },
    dialogOpen() {
      this.robot_id = localStorage.getItem("ydRobot_id");
      this.getRobotParams({
        page: 1,
        size: 0,
        robotId: this.robot_id,
        type: 3
      });
      this.regularsQueryForm.taskId = this.data.id;
      this.regularsForm.taskId = this.data.id;
      this.regularsForm.robotId = this.data.robotId;
      this.regularsForm.name = this.data.name;
      if (this.regularsQueryForm && this.regularsQueryForm.taskId) {
        this.getTaskRegularsList();
      }
    },
    handleAdd() {
      if (
        (this.regularsForm && this.regularsForm.taskId,
        this.regularsForm.robotId)
      ) {
        var tempTime = Date.now();
        while (
          this.regularlyData.some(
            item =>
              item.executeTime ===
              parseTime(tempTime, "{y}-{m}-{d} {h}:{i}:{s}")
          )
        ) {
          tempTime += 1000;
        }
        this.regularlyData.push({
          executeTime: parseTime(tempTime, "{y}-{m}-{d} {h}:{i}:{s}")
        });
      }
    },
    handleTimeChange(val) {
      //
    },
    handleSave() {
      let tempList = JSON.parse(JSON.stringify(this.regularlyData));
      for (var i = 0, len = tempList.length; i < len; i++) {
        for (var j = i + 1, len = tempList.length; j < len; j++) {
          if (tempList[i].executeTime === tempList[j].executeTime) {
            this.$message({
              message: "请勿添加重复时间!",
              type: "warning"
            });
            return;
          }
        }
      }
      if (
        this.regularsForm &&
        this.regularsForm.taskId &&
        this.regularsForm.robotId
      ) {
        if (this.regularlyData && this.regularlyData.length > 0) {
          this.saveLoading = !this.saveLoading;
          taskRegularsUpdate({
            taskId: this.regularsForm.taskId,
            robotId: this.regularsForm.robotId,
            taskRegularRequests: this.regularlyData
          })
            .then(response => {
              this.setOperationLogs(
                "配置-" + this.regularsForm.name + "的定时任务策略"
              );
              this.dbTableUpdatePub({
                table_id: 6
              });
              this.getTaskRegularsList();
              this.saveLoading = !this.saveLoading;
              this.$alert("保存成功", "提示", {
                confirmButtonText: "确定",
                callback: action => {
                  //
                }
              });
            })
            .catch(() => {
              this.saveLoading = !this.saveLoading;
            });
        } else {
          this.$message({
            message: "请添加定时!"
          });
        }
      }
    },
    deleteRow(data, index) {
      this.$confirm("此操作将永久删除该数据, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          if (data.row && data.row.id) {
            taskRegularsDelete({}, data.row.id)
              .then(response => {
                this.setOperationLogs(
                  "删除-" + this.regularsForm.name + "的定时任务策略"
                );
                this.dbTableUpdatePub({
                  table_id: 6
                });
                // this.getTaskRegularsList();
                this.regularlyData.splice(index, 1);
                this.$message({
                  message: "删除成功!",
                  type: "success"
                });
              })
              .catch(() => {});
          } else {
            this.regularlyData.splice(index, 1);
          }
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },
    getTaskRegularsList() {
      taskRegularsList(this.regularsQueryForm)
        .then(response => {
          if (response.list) {
            this.regularlyData = response.list;
          }
        })
        .catch(() => {});
    },
    getRobotParams(data) {
      robotParams(data)
        .then(response => {
          if (response.list && response.list.length > 0) {
            for (var i = 0, len = response.list.length; i < len; i++) {
              if (response.list[i].name === "ros_websocket_ip") {
                this.rosObj.ip = response.list[i].value;
              }
              if (response.list[i].name === "ros_websocket_port") {
                this.rosObj.port = response.list[i].value;
              }
            }
          }
        })
        .catch(() => {});
    },
    // 添加日志管理
    setOperationLogs(content) {
      var parm = {
        content: content,
        deviceId: localStorage.getItem("ydRobot_device_id"),
        type: 0
      };
      postOperationLogs(parm)
        .then(response => {})
        .catch(() => {});
    }
  }
};
</script>

<style>
.RegularlyPerform {
  /*  */
}
.RegularlyPerform .el-dialog-redefine {
  width: 60%;
  height: 60%;
  min-height: 360px;
}
.RegularlyPerform .el-dialog__header {
  padding: 0;
  background: linear-gradient(
    rgb(227, 242, 238),
    rgb(202, 231, 238)
  ); /* 标准的语法 */
}
.RegularlyPerform .el-dialog__header .el-dialog__title {
  line-height: 27px;
  font-size: 14px;
  color: #202123;
  padding: 0 6px;
}
.RegularlyPerform .el-dialog__header .el-dialog__headerbtn {
  width: 23px;
  height: 23px;
  top: 2px;
  right: 5px;
  font-size: 18px;
  border-radius: 3px;
  border: 1px solid rgb(177, 211, 162);
}
.RegularlyPerform .el-dialog__body {
  height: calc(100% - 27px);
  padding: 3px;
  background-color: rgb(227, 242, 238);
}
.RegularlyPerform .outside-border {
  width: 100%;
  height: 100%;
  padding: 6px 8px;
  border: 1px solid rgb(194, 221, 228);
  background-color: rgb(227, 242, 238);
}
.RegularlyPerform .config-area {
  position: relative;
  width: 100%;
  height: 100%;
  border: 1px solid rgb(202, 231, 238);
}
.RegularlyPerform .config-operation {
  width: 100%;
  height: 30px;
  background-color: #efefef;
  border-bottom: 1px solid #e1e1e1;
}
.RegularlyPerform .but-add,
.RegularlyPerform .but-save {
  height: 27px;
  margin-left: 15px;
  margin-right: 10px;
  padding: 0;
  font-size: 13px;
  color: #000;
  float: left;
}
.RegularlyPerform .add-icon {
  width: 14px;
  height: 14px;
  margin-right: 3px;
  background-image: url(../../../../static/resources/images/add.png);
  background-size: 100% 100%;
  float: left;
}
.RegularlyPerform .save-icon {
  width: 14px;
  height: 14px;
  margin-right: 3px;
  background-image: url(../../../../static/resources/images/save.png);
  background-size: 100% 100%;
  float: left;
}
.RegularlyPerform .config-list {
  position: absolute;
  width: 100%;
  height: calc(100% - 30px);
  /* overflow: auto; */
}
.RegularlyPerform .el-table-redefine {
  width: 100%;
  height: 100%;
  /* display: flex;
  flex-flow: column; */
}
.RegularlyPerform
  .el-table-redefine
  .el-table__header-wrapper
  .el-table__header
  .has-gutter
  th {
  background-color: #efefef;
  border-right: 1px solid #e1e1e1;
}
.RegularlyPerform .el-table-redefine .el-table__body-wrapper {
  /* overflow: hidden;
  overflow-y: auto;
  flex-grow: 1; */
}
</style>